<template>
  <div
    v-loading="mainLoad"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    id="personalCenter"
  >
    <div class="safe">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>账户安全</h4>
      </div>
      <ul class="safe-list">
        <li>
          <div>
            <span>手机号码:</span>
            <span>{{userStatus.phoneNo==1?'未设置':'已设置'}}</span>
          </div>
          <el-button size="small" v-if="userStatus.phoneNo!=1" type="info" disabled>设置</el-button>
          <el-popover v-else placement="bottom" width="400" trigger="click">
            <div>
              <el-input
                size="mini"
                placeholder="请输入手机号"
                v-model="phoneSetting.phoneNo"
                class="input-with-select"
              >
                <el-select
                  style="width:100px"
                  v-model="phoneSetting.area"
                  slot="prepend"
                  placeholder="请选择"
                >
                  <el-option v-for="(v,i) in allArea" :key="i" :label="v.name" :value="v.phoneCode"></el-option>
                </el-select>
              </el-input>
              <el-input
                style="margin:10px 0"
                size="mini"
                placeholder="请输入验证码"
                v-model="phoneSetting.verificationCode"
              >
                <template slot="append">
                  <el-button
                    style="width:120px"
                    @click.native="sendCode"
                    :loading="codeStatus"
                  >{{phoneSetting.time}}</el-button>
                </template>
              </el-input>
              <div>
                <el-button
                  @click="bindingPhoneNo"
                  :loading="phoneLoad"
                  style="width:100%"
                  size="mini"
                  type="primary"
                >确定</el-button>
              </div>
            </div>
            <el-button plain type="warning" size="small" slot="reference">设置</el-button>
          </el-popover>
        </li>
        <li>
          <div>
            <span>电子邮箱:</span>
            <span>{{userStatus.email==1?'未设置':'已设置'}}</span>
          </div>
          <el-button size="small" v-if="userStatus.email!=1" type="info" disabled>设置</el-button>
          <el-popover v-else placement="bottom" width="400" trigger="click">
            <div>
              <el-input
                size="mini"
                placeholder="请输入邮箱号"
                v-model="emailSetting.email"
                class="input-with-select"
              ></el-input>
              <el-input
                style="margin:10px 0"
                size="mini"
                placeholder="请输入验证码"
                v-model="emailSetting.verificationCode"
              >
                <template slot="append">
                  <el-button
                    style="width:120px"
                    @click.native="sendCode2"
                    :loading="codeStatus"
                  >{{emailSetting.time}}</el-button>
                </template>
              </el-input>
              <div>
                <el-button
                  @click="bindingEmail"
                  :loading="emailLoad"
                  style="width:100%"
                  size="mini"
                  type="primary"
                >确定</el-button>
              </div>
            </div>
            <el-button plain type="warning" size="small" slot="reference">设置</el-button>
          </el-popover>
        </li>
        <li>
          <div>
            <span>账户密码:</span>
            <span>******</span>
          </div>
          <el-popover placement="bottom" width="400" trigger="click">
            <div>
              <el-input
                type="password"
                v-model="loginPass.oldPassword"
                size="mini"
                placeholder="原密码"
              ></el-input>
              <el-input
                type="password"
                v-model="loginPass.password"
                style="margin:10px 0 0"
                size="mini"
                placeholder="新密码"
              ></el-input>
              <el-input
                type="password"
                v-model="loginPass.confirmPassword"
                style="margin:10px 0"
                size="mini"
                placeholder="确认密码"
              ></el-input>
              <div>
                <el-button
                  @click="loginPassModify"
                  :loading="loginLoad"
                  style="width:100%"
                  size="mini"
                  type="primary"
                >确定</el-button>
              </div>
            </div>
            <el-button plain type="warning" size="small" slot="reference">修改</el-button>
          </el-popover>
        </li>
      </ul>
    </div>
    <div class="identify">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>实名认证</h4>
      </div>
      <div class="identify-over">
        <div>
          <img src="../../assets/img/guodu.png" alt />
          <p>
            <span>信息认证</span>
            <span>证件认证</span>
          </p>
        </div>
        <el-button
          @click.native="identityStatus = true"
          v-if="userStatus.userInfo==1"
          plain
          type="warning"
          size="small"
          slot="reference"
        >认证</el-button>
        <el-popover v-else placement="bottom" width="500" trigger="click">
          <el-form
            v-loading="realNameLoad"
            element-loading-spinner="el-icon-loading"
            size="small"
            ref="realName"
            label-width="80px"
          >
            <el-form-item label="姓名">{{realName.name}}</el-form-item>
            <el-form-item label="身份证">{{realName.credentialNum}}</el-form-item>
            <el-form-item label="证件照">
              <div class="file-box">
                <span>正面照</span>
                <div element-loading-spinner="el-icon-loading">
                  <img :src="realName.credentialFront" alt />
                </div>
              </div>
              <div class="file-box">
                <span>背面照</span>
                <div element-loading-spinner="el-icon-loading">
                  <img :src="realName.credentialBack" alt />
                </div>
              </div>
              <div class="file-box">
                <span>手持照</span>
                <div element-loading-spinner="el-icon-loading">
                  <img :src="realName.credentialHand" alt />
                </div>
              </div>
            </el-form-item>
          </el-form>
          <el-button
            @click.native="seeRealName"
            plain
            type="warning"
            size="small"
            slot="reference"
          >{{realName.status==0?'审核中':"查看认证"}}</el-button>
        </el-popover>

        <!-- <span></span> -->
      </div>
    </div>
    <div class="invite">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>邀请码</h4>
      </div>
      <div class="invite-content">
        <div class="content-left">
          <input disabled id="copyCode" type="text" :value="inviteCode" />
          <span @click="copyInviteCode">复制</span>
          <el-popover placement="bottom" width="400" trigger="click">
            <div>
              <el-input
                size="mini"
                oninput="value=value.replace(/^0(0+)|[^\d]+/g,'')"
                placeholder="请输入邀请码"
                v-model="inviteModifyCode"
                class="input-with-select"
                style="margin: 0 0 10px 0"
              ></el-input>
              <div>
                <el-button
                  :loading="inviteModifyLoad"
                  @click.native="modifyInviteCode"
                  style="width:100%"
                  size="mini"
                  type="primary"
                >确定</el-button>
              </div>
            </div>
            <el-button class="p3-change" plain type="warning" size="small" slot="reference">修改</el-button>
          </el-popover>
        </div>
        <div class="content-right">
          <p>我的推广收益</p>
          <div>
            <div>
              <p>
                <span>{{inviteEarning.inviteNum==null?0:inviteEarning.inviteNum}}</span>
                <span>人</span>
              </p>
              <p>推广总人数</p>
            </div>
            <div>
              <p>
                <span>{{inviteEarning.income==null?0.00:inviteEarning.income}}</span>
                <span>USDT</span>
              </p>
              <p>总折合收益</p>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="bank">
      <div class="title">
        <img src="../../assets/img/zhuangshi.png" alt />
        <h4>银行卡</h4>
      </div>
      <div class="bank-add">
        <img @click="bindingBnakStatus = true" v-if="userStatus.userBank==1" src="../../assets/img/tianjia.png" alt />
        <img @click="checkBank" v-else src="../../assets/img/yinhangka.png" alt />
      </div>
    </div>
    <!-- 实名认证 -->
    <el-dialog width="800px" :visible.sync="identityStatus">
      <el-form size="small" ref="identify" :model="identify" label-width="80px">
        <el-form-item label="姓名">
          <el-input v-model="identify.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证">
          <el-input v-model="identify.credentialNum"></el-input>
        </el-form-item>
        <el-form-item label="证件照">
          <div class="file-box">
            <span>正面照</span>
            <input
              type="file"
              value
              name="file"
              id="input_file1"
              accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
              @change="imgPreview1('input_file1','#img1','正面')"
            />
            <div v-loading="pic1" element-loading-spinner="el-icon-loading">
              <img id="img1" src="../../assets/img/up-pic.jpg" alt />
            </div>
          </div>
          <div class="file-box">
            <span>背面照</span>
            <input
              type="file"
              value
              name="file"
              id="input_file2"
              accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
              @change="imgPreview1('input_file2','#img2','背面')"
            />
            <div v-loading="pic2" element-loading-spinner="el-icon-loading">
              <img id="img2" src="../../assets/img/up-pic.jpg" alt />
            </div>
          </div>
          <div class="file-box">
            <span>手持照</span>
            <input
              type="file"
              value
              name="file"
              id="input_file3"
              accept="image/gif, image/jpeg, image/jpg, image/png, image/svg"
              @change="imgPreview1('input_file3','#img3','手持')"
            />
            <div v-loading="pic3" element-loading-spinner="el-icon-loading">
              <img id="img3" src="../../assets/img/up-pic.jpg" alt />
            </div>
          </div>
        </el-form-item>
        <el-form-item label>
          <el-button
            @click.native="realNameiDentify"
            :loading="identifyLoad"
            style="width:150px"
            size="small"
            type="primary"
          >提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 绑定银行卡 -->
    <el-dialog width="600px" :visible.sync="bindingBnakStatus">
      <el-form style="width:500px" size="small" ref="identify" :model="bank" label-width="120px">
        <el-form-item label="开户行">
          <el-input v-model="bank.bankName"></el-input>
        </el-form-item>
        <el-form-item label="开户支行">
          <el-input v-model="bank.bankBranchName"></el-input>
        </el-form-item>
        <el-form-item label="姓名">
          <el-input v-model="bank.cardName"></el-input>
        </el-form-item>
        <el-form-item label="银行卡号">
          <el-input v-model="bank.cardNum"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="bank.idCardNum"></el-input>
        </el-form-item>
        <el-form-item label="银行预留手机号">
          <el-input v-model="bank.phoneNo"></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-button @click.native="addBank" style="width:150px" type="primary">{{userStatus.userBank==1?'提交':'修改'}}</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import * as imageConversion from "image-conversion";
import {
  updatePassword,
  bindPhoneNo,
  bindEmail,
  userInfo,
  allAreaCode,
  sendVerificationCode,
  pictureUpdata,
  userInfoVerified,
  seeUserInfoVerified,
  inviteDetails,
  userInviteAdd,
  promotionRevenue,
  addOrUpdateBank,
  userBankDetails
} from "../../api/api";
import { mapState } from "vuex";
import qs from "qs";
import $ from "jquery";
export default {
  name: "personalCenter",
  data() {
    return {
      mainLoad: true,
      allArea: [], //区号
      userStatus: [], //用户状态
      //修改登录密码
      loginLoad: false,
      loginPass: {
        oldPassword: "",
        password: "",
        confirmPassword: ""
      },
      //设置手机号
      codeStatus: false, //验证码状态
      phoneLoad: false,
      phoneSetting: {
        phoneNo: "",
        area: "86",
        verificationCode: "",
        time: "发送验证码"
      },
      //设置邮箱号
      emailLoad: false,
      emailSetting: {
        email: "",
        verificationCode: "",
        time: "发送验证码"
      },
      //实名认证
      identityStatus: false,
      pic1: false,
      pic2: false,
      pic3: false,
      identifyLoad: false,
      identify: {
        name: "",
        userCredentialType: 1,
        credentialNum: "",
        credentialFront: "",
        credentialBack: "",
        credentialHand: ""
      },
      realNameLoad: false,
      realName: [], //查看实名信息
      //邀请码
      inviteModifyLoad: false,
      inviteCode: "",
      inviteModifyCode: "",
      inviteEarning:[],
      //绑定银行卡
      bindingBnakStatus:false,
      bank:{
        bankName:'',
        bankBranchName:'',
        cardName:'',
        cardNum:'',
        idCardNum:'',
        phoneNo:''
      }
    };
  },
  computed: {
    ...mapState(["userMessage", "token"])
  },
  created() {
    this.userInfoStatus();
    this.getInviteCode();
    this.getEarning();
  },
  methods: {
    //上传图片
    imgPreview1(name1, name2, type) {
      var file = document.getElementById(name1).files[0];
      if (file == undefined) {
        return false;
      }
      if (type == "正面") {
          this.pic1 = true;
        } else if (type == "背面") {
          this.pic2 = true;
        } else {
          this.pic3 = true;
        }
      imageConversion.compressAccurately(file,400).then(res => {
        var params = new FormData();
        params.append("file", res);
        pictureUpdata(params)
          .then(res => {
            if (type == "正面") {
              this.pic1 = false;
            } else if (type == "背面") {
              this.pic2 = false;
            } else {
              this.pic3 = false;
            }
            if (res.data.code == 200) {
              $(name2).attr({
                src: URL.createObjectURL(file)
              });
              if (type == "正面") {
                this.identify.credentialFront = res.data.data;
              } else if (type == "背面") {
                this.identify.credentialBack = res.data.data;
              } else {
                this.identify.credentialHand = res.data.data;
              }
            }
          })
          .catch(() => {});
      });
    },
    //修改登录密码
    loginPassModify() {
      this.loginLoad = true;
      var params = {
        token: this.token,
        oldPassword: this.loginPass.oldPassword,
        password: this.loginPass.password,
        confirmPassword: this.loginPass.confirmPassword
      };
      updatePassword(qs.stringify(params)).then(res => {
        this.loginLoad = false;
        if (res.data.code == 200) {
          this.loginPass.oldPassword = "";
          this.loginPass.password = "";
          this.loginPass.confirmPassword = "";
          this.$notify({
            title: "提示",
            message: "修改成功！",
            type: "success"
          });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    },
    //绑定邮箱
    bindingEmail() {
      this.emailLoad = true;
      var params = {
        token: this.token,
        email: this.emailSetting.email,
        verificationCode: this.emailSetting.verificationCode
      };
      bindEmail(qs.stringify(params)).then(res => {
        this.emailLoad = false;
        if (res.data.code == 200) {
          this.emailSetting.email = "";
          this.emailSetting.verificationCode = "";
          this.userInfoStatus();
          this.$notify({
            title: "提示",
            message: "设置成功！",
            type: "success"
          });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    },
    //绑定手机号
    bindingPhoneNo() {
      this.phoneLoad = true;
      var params = {
        token: this.token,
        phoneNo: this.phoneSetting.phoneNo,
        area: this.phoneSetting.area,
        verificationCode: this.phoneSetting.verificationCode
      };
      bindPhoneNo(qs.stringify(params)).then(res => {
        this.phoneLoad = false;
        if (res.data.code == 200) {
          this.phoneSetting.phoneNo = "";
          this.phoneSetting.verificationCode = "";
          this.userInfoStatus();
          this.$notify({
            title: "提示",
            message: "设置成功！",
            type: "success"
          });
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    },
    //实名认证
    realNameiDentify() {
      if (this.identify.name == "" || this.identify.credentialNum == "") {
        this.$notify({
          title: "警告",
          message: "姓名和证件号不能为空！",
          type: "warning"
        });
        return false;
      }
      this.identifyLoad = true;
      var params = {
        token: this.token,
        name: this.identify.name,
        userCredentialType: this.identify.userCredentialType,
        credentialNum: this.identify.credentialNum,
        credentialFront: this.identify.credentialFront,
        credentialBack: this.identify.credentialBack,
        credentialHand: this.identify.credentialHand
      };
      userInfoVerified(qs.stringify(params)).then(res => {
        this.identifyLoad = false;
        if (res.data.code == 200) {
          this.userInfoStatus();
          this.$notify({
            title: "提示",
            message: "设置成功！",
            type: "success"
          });
          this.identityStatus = false;
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    },
    //获取邀请码
    getInviteCode() {
      var params = {
        token: this.token
      };
      inviteDetails(qs.stringify(params)).then(res => {
        this.inviteCode = res.data.data;
      });
    },
    //修改邀请码
    modifyInviteCode() {
      this.inviteModifyLoad = true;
      var params = {
        token: this.token,
        inviteCode: this.inviteModifyCode
      };
      userInviteAdd(qs.stringify(params)).then(res => {
        this.inviteModifyLoad = false;
        if (res.data.code == 200) {
          this.getInviteCode();
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      });
    },
    //获取推广收益
    getEarning(){
      var params = {
        token:this.token
      }
      promotionRevenue(qs.stringify(params)).then(res=>{
        this.inviteEarning = res.data.data
      })
    },
    //添加银行卡
    addBank(){
      // console.log(this.bank,9999)
      this.bank.token = this.token
      if(this.userStatus.userBank==2){
        this.bank.userBankId = this.bank.id
      }
      addOrUpdateBank(qs.stringify(this.bank)).then(res=>{
        if (res.data.code == 200) {
          this.userInfoStatus();
          this.$notify({
            title: "提示",
            message: "设置成功！",
            type: "success"
          });
          this.bindingBnakStatus = false;
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      })
    },
    //查看银行卡
    checkBank(){
      var params = {
        token:this.token
      }
      userBankDetails(qs.stringify(params)).then(res=>{
        // console.log(res.data)
        if (res.data.code == 200) {
          this.bank = res.data.data
          this.bindingBnakStatus = true;
        } else {
          this.$notify({
            title: "警告",
            message: res.data.chineseMessage,
            type: "warning"
          });
        }
      })
    },
    // ---------------------------------
    //查看实名认证信息
    seeRealName() {
      this.realNameLoad = true;
      var params = {
        token: this.token
      };
      seeUserInfoVerified(params).then(res => {
        this.realNameLoad = false;
        this.realName = res.data.data;
      });
    },
    //获取区号
    getAllAreaCode() {
      allAreaCode().then(res => {
        this.allArea = res.data.data;
      });
    },
    //发送手机验证码
    sendCode() {
      if (typeof this.phoneSetting.time == "number") {
        return false;
      }
      if (this.phoneSetting.phoneNo == "") {
        this.$notify({
          title: "警告",
          message: "请输入正确的手机号！",
          type: "warning"
        });
        return false;
      }
      var params = {
        areaNo: this.phoneSetting.area,
        phoneNo: this.phoneSetting.phoneNo,
        type: 0
      };
      this.codeStatus = true;
      sendVerificationCode(qs.stringify(params)).then(res => {
        this.codeStatus = false;
        if (res.data.code == 200) {
          this.$notify({
            title: "提示",
            message: "发送成功！",
            type: "success"
          });
          this.phoneSetting.time = 60;
          var timer = setInterval(() => {
            this.phoneSetting.time--;
            if (this.phoneSetting.time <= 0) {
              this.phoneSetting.time = "发送验证码";
              clearInterval(timer);
            }
          }, 1000);
        }
      });
    },
    //发送邮箱验证码
    sendCode2() {
      if (typeof this.emailSetting.time == "number") {
        return false;
      }
      if (
        this.emailSetting.email == "" ||
        this.emailSetting.email.indexOf("@") < 0
      ) {
        this.$notify({
          title: "警告",
          message: "请输入正确的邮箱！",
          type: "warning"
        });
        return false;
      }
      var params = {
        email: this.emailSetting.email,
        type: 1
      };
      this.codeStatus = true;
      sendVerificationCode(qs.stringify(params)).then(res => {
        this.codeStatus = false;
        if (res.data.code == 200) {
          this.$notify({
            title: "提示",
            message: "发送成功！",
            type: "success"
          });
          this.emailSetting.time = 60;
          var timer = setInterval(() => {
            this.emailSetting.time--;
            if (this.emailSetting.time <= 0) {
              this.emailSetting.time = "发送验证码";
              clearInterval(timer);
            }
          }, 1000);
        }
      });
    },
    //查看认证状态
    userInfoStatus() {
      this.mainLoad = true;
      userInfo({
        token: this.token
      })
        .then(res => {
          this.mainLoad = false;
          this.userStatus = res.data.data;
          if (this.userStatus.phoneNo == 1) {
            this.getAllAreaCode();
          }
          if (res.data.code != 200) {
            this.$notify({
              title: "警告",
              message: res.data.chineseMessage,
              type: "warning"
            });
          }
          // console.log(this.userStatus);
        })
        .catch(() => {
          this.mainLoad = false;
          this.$notify.error({
            title: "错误",
            message: "网络跑路了！"
          });
        });
    },
    //点击复制邀请码
    copyInviteCode() {
      var num = document.getElementById("copyCode");
      num.select();
      document.execCommand("Copy");
      this.$notify({
        title: "提示",
        message: "复制成功！",
        type: "success"
      });
    }
  }
};
</script>
<style lang='less' scope>
.title {
  position: relative;
  > img {
    position: absolute;
    top: 4px;
  }
  > h4 {
    margin-left: 50px;
  }
}
// ----------------------
#personalCenter {
  .safe {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .safe-list {
      margin: 20px 0 0 50px;
      width: 60%;
      > li:last-child {
        margin-bottom: 0;
      }
      > li {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        > div {
          color: #334d50;
          font-size: 15px;
          span:nth-child(2) {
            color: #a1b1b0;
            margin-left: 30px;
          }
        }
      }
    }
  }
  .identify {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    .identify-over {
      width: 60%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 30px 0 20px 50px;
      > div {
        > p {
          display: flex;
          justify-content: space-between;
          color: #334d50;
          font-size: 15px;
          > span:last-child {
            margin-right: -10px;
          }
          > span:last-child {
            margin-right: -10px;
          }
        }
      }
    }
  }
  .invite {
    background-color: #fff;
    padding: 15px;
    margin-bottom: 10px;
    > .invite-content {
      width: 80%;
      display: flex;
      justify-content: flex-start;
      padding: 20px 0;
      > div {
        width: 50%;
      }
      > .content-left {
        display: flex;
        margin-left: 50px;
        padding-top: 15px;
        > input:nth-child(1) {
          height: 40px;
          width: 150px;
          border: 1px solid #e6e6e6;
          line-height: 40px;
          padding: 0 4px;
          outline: none;
        }
        > span:nth-child(2) {
          width: 60px;
          height: 40px;
          background-color: #0a9187;
          color: #fff;
          text-align: center;
          line-height: 40px;
          cursor: pointer;
        }
        .p3-change {
          width: 60px;
          height: 40px;
          background-color: #fff;
          color: #0a9187;
          text-align: center;
          cursor: pointer;
          border: 0;
          font-size: 14px;
        }
      }
      > .content-right {
        border-left: 1px solid #e6e6e6;
        padding-left: 100px;
        > p {
          color: #334d50;
          font-size: 14px;
          margin-bottom: 10px;
        }
        > div {
          display: flex;
          justify-content: space-between;
          > div {
            > p {
              color: #a1b1b0;
              font-size: 14px;
            }
            > p:nth-child(1) {
              text-align: center;
              span:first-child {
                font-size: 16px;
                color: #334d50;
              }
            }
          }
        }
      }
    }
  }
  .bank {
    background-color: #fff;
    padding: 15px;
    .bank-add {
      margin: 20px 0 0;
      margin-left: 40px;
    }
  }
  // ----------------------
}
.file-box {
  display: inline-block;
  margin-right: 20px;
  position: relative;
  width: 100px;
  > span {
    position: absolute;
    left: 0;
    top: 10px;
    border-radius: 4px;
    color: #dbb783;
    background-color: #fff;
    border: 1px solid #dbb783;
    height: 30px;
    padding: 0 28px !important;
  }
  > input {
    position: absolute;
    left: 0;
    top: 35px;
    opacity: 0;
    width: 100%;
    height: 100%;
  }
  > div {
    margin-top: 50px;
    border: 1px solid #eee;
    width: 100px;
    height: 100px;
    > img {
      display: inline-block;
      width: 100%;
      height: 100%;
    }
  }
}
</style>